<template>
  <div class="wrapper">
		<todo-input></todo-input>
		<todo-filter
		@changeFilter = 'filterValue=$event'
		/>
		<todo-list
		:todoList="filterTodos"
		></todo-list>
		
	</div>
</template>

<script lang="ts">
	import {defineComponent,onMounted,computed,ref,watch} from 'vue'
	import {useStore,Store} from 'vuex'
	import {useTodo,IUseTodo} from '@/hooks'
	import {TODO_STATUS} from '@/typings'
	import {ITodo} from '@/typings'
	import TodoInput from '@/components/TodoInput/TodoInput.vue'
	import TodoList from '@/components/TodoList/TodoList.vue'
	import TodoFilter from '@/components/TodoFilter/TodoFilter.vue'
	
	
	export default defineComponent({
		name: 'App',
		components:{
			TodoInput,
			TodoList,
			TodoFilter,
		},
		setup(){
			debugger
			const {setTodoList}:IUseTodo= useTodo();
			const store:Store<any> = useStore();
			//初始化本地列表
			onMounted(()=>{
				setTodoList();
				console.log(store.state.list);
			});
			
			const filterValue = ref(TODO_STATUS.ALL);
			// let list = computed(()=>store.state.list);
			// const todos = ref(store.state.list);
			const todos = computed(()=>store.state.list);
			const filterTodos =  computed(()=>{
				switch(filterValue.value){
					case TODO_STATUS.FINISHED:
					return todos.value.filter((todo:ITodo)=>todo.status == TODO_STATUS.FINISHED);
					case TODO_STATUS.WILLDO:
					return todos.value.filter((todo:ITodo)=>todo.status == TODO_STATUS.WILLDO);
					case TODO_STATUS.DOING:
					return  todos.value.filter((todo:ITodo)=>todo.status == TODO_STATUS.DOING)
					default:
					return todos.value;
				}
			});
			return{
				filterValue,
				filterTodos,
			}
		},
	});
</script>

<style>

</style>
